<template>
  <div class="profit">
    <div class="title">
      <van-sticky>
        <van-nav-bar title="收益" />
      </van-sticky>
    </div>
    <div class="allprofit">
      <van-tabs v-model="active">
        <div class="all">
          <van-tab title="全部">
            <van-card
              v-for="profit in profitData"
              :key="profit.id"
              :title="'costomer' + profit.customerId"
              :desc="profit.address.address"
              :thumb="profit.customer.userFace"
            >
              <template #tag>
                <van-tag plain type="danger" style="left: 260px">
                  {{ profit.status }}</van-tag
                >
              </template>
              <template #footer>
                <div>
                  <span style="font-size: 15px">{{
                    moment(profit.orderTime).format("YY-MM-DD hh:mm:ss")
                  }}</span
                  >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                  <span style="font-size: 18px"
                    >￥{{ profit.total + ".00" }}</span
                  >
                </div>
              </template>
            </van-card>
          </van-tab>
        </div>
        <div class="cash">
          <van-tab title="提现">
            <van-card
              v-for="cash in cashData"
              :key="cash.id"
              :desc="moment(cash.applyTime).format('YY-MM-DD hh:mm:ss')"
            >
            <template #price>
                <span style="font-size: 18px">{{
                  cash.money + '.00'
                }}</span>
              </template>
              <template #title>
                <span style="font-size: 18px">{{
                  cash.applyType + "-到银行卡"
                }}</span>
                <van-tag plain type="danger" style="left: 160px">
                  {{ cash.status }}</van-tag
                >
              </template>
            </van-card>
          </van-tab>
          <div style="height: 50px"></div>
        </div>
      </van-tabs>
    </div>
  </div>
</template>

<script>
// 引入vuex的辅助函数
import { mapActions, mapState } from "vuex";
import moment from "moment";
export default {
  data() {
    return {
      active: 0,
      // cashData:[]
      //   profitData:[]
      list: {
        page: 1,
        pageSize: 99,
        status: "已完成",
      },
      list2: {
        page: 1,
        pageSize: 99,
      },
    };
  },
  computed: {
    //   引入profit vuex中的方法
    ...mapState("profit", ["profitData"]),
    ...mapState("cash", ["cashData"]),
    ...mapState("user", ["userInfo"]),
  },
  methods: {
    moment,
    //   引入profit vuex中的方法
    ...mapActions("profit", ["getAllProfitData"]),
    // 引入cash
    ...mapActions("cash", ["getAllCashData"]),
    ...mapActions("user", ["getUserInfo"]),
    //   查询全部顾客收益数组
    // 查询提现数据
  },
  created() {
    this.getUserInfo().then((r) => {
      this.list.employeeId = this.userInfo.id;
      this.getAllProfitData(this.list);
    });
    this.getUserInfo().then((r) => {
      this.list2.employeeId = this.userInfo.id;
      this.getAllCashData(this.list2);
    });
  },
};
</script>

<style scoped>
.title {
  height: 50px;
  text-align: center;
}

.all .van-card {
  margin: 15px;
  background-color: white;
  box-shadow: 0 0 6px 0 #ccc;
  line-height: 0px;
  height: 110px;
}

.all ::v-deep .van-card__price {
  float: right;
  margin-bottom: 5px;
}
.cash ::v-deep .van-card__price {
  font-weight: bolder;
  font-size: 18px;
}
.all ::v-deep .van-card__title {
  text-align: left;
  line-height: 20px;
  font-size: 18px;
}

.cash ::v-deep .van-card__title {
  text-align: left;
  font-size: 18px;
}
.cash .van-card {
  margin: 15px;
  background-color: rgb(255, 250, 250);
  box-shadow: 0 0 6px 0 #ccc;
}
.all ::v-deep .van-card__desc {
  margin-top: 15px;
  font-size: 15px;
}
.cash ::v-deep .van-card__desc {
  font-size: 15px;
}
::v-deep .van-nav-bar__title {
  color: white !important;
  font-weight: bolder;
}
.van-nav-bar {
  background-image: linear-gradient(
    90deg,
    rgb(191, 115, 255),
    rgb(117, 121, 255)
  );
}
.van-card__price-decimal {
  font-weight: 200;
}
</style>